<!--
 * @Author: coocase
 * @Date: 2021-05-02 18:53:56
 * @LastEditTime: 2021-06-07 08:10:32
 * @LastEditors: coocase
 * @Description:
 * @FilePath: \git\dami\src\pages\detail\detailInfoComment.vue
-->
<template>
    <div>
        <div class="title">评价</div>
        <div>打个分吧 :<Rate v-model="userComment.score" /></div>
        <Input v-model="userComment.comment" type="textarea" :rows="4" placeholder="写个评价吧" />
        <Button class="btn" size="large" type="primary" @click="subcomm">评论</Button>

        <List  item-layout="vertical">
            <ListItem  v-for="item in pages.pageData" :key="item.index">
                <ListItemMeta  :avatar='avat' :title="item.userName" :description="item.comment" />
                <Rate disabled  v-model="item.score" />
                {{item.date}}
                <Icon type="ios-thumbs-up-outline" /> 234
            </ListItem>
        </List>
        <Page class="page" :total="pages.pageTotal" :page-size="5" @on-change="pageChange" :current="1"/>
    </div>
</template>

<script>
export default {
    name: "detailInfoComment",
    props:['datas'],
    data:function () {
        return{
            inpoutdate:'',

            avat:"https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar",
            pages:{
                    pageNum:1,
                    pageTotal:10,
                    pageSize:5,
                    pageData:[]
                },
                userComment:{
                    comment:'',
                    score:0,
                    userName:'coo'
                }
        }
    },
    methods:{
        pageInit(){
            // console.log(this.datas.commentsPages.length);
            // console.log(this.datas.commentsPages[0].comments);
                this.pages.pageNum = 1;
                this.pages.pageTotal = this.datas.commentsPages.length*5,
                // Array.from()  将一个类数组对象或者可遍历对象转换成一个真正的数组
                this.pages.pageData = Array.from(this.datas.commentsPages[0].comments)

            },
        pageChange:function (i) {
                this.pages.pageNum = i;

                this.pages.pageData = Array.from(this.datas.commentsPages[i-1].comments)
        },
        subcomm:function () {
            //获取日期 并设置格式
            var d = new Date()
            var getdate = d.getFullYear()+"-"+d.getMonth()+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()
            var data = {}
            this.userComment.date = getdate;
            //判断是否登录 如果登录则进行复制
            if(this.GLOBAL.hasLogin){
                this.userComment.userName = this.GLOBAL.userName.toString();
                //如果直接复制的话，数据就会持续绑定，已发布的评论依然会绑定数据，解构赋值则不是直接赋值，不会影响已发布的数据
                data = {...this.userComment}
                this.pages.pageData.unshift(data);
            }else{
                this.$Notice.warning({
                    title: '请登录',
                    duration:2
                });
            }
        }
    },
    beforeMount:function () {
         this.pageInit()
    },
    mounted:function () {

    }

};
</script>

<style scoped>
.title{
    padding-bottom: 14px;
    margin-bottom: 23px;
    font-size: 20px;
    color: #000;
    border-bottom: 1px solid #e2e2e2;
}
.btn{
    /* background-color: #ff3c1b ; */
    margin: 20px 0;
    width: 150px;
}
.page{
    margin: 20px auto;
}
</style>
